<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>智能推荐实践</title>
    <!-- 引入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        input, button {
            margin: 5px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            background-color: #5cb85c;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: #4cae4c;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

        .hint {
            font-size: 0.9em;
            color: #666;
        }
    </style>
</head>
<body>
<h1>根据国家和类型推荐电影</h1>
<input type="text" id="country" placeholder="输入国家">
<div class="hint">可选国家：'比利时', '英国', '中国大陆', '新西兰', '中国香港', '丹麦', '匈牙利', '墨西哥', '卡塔尔',
    '澳大利亚', '南非', '奥地利', '瑞典', '日本', '美国', '加拿大', '塞浦路斯', '希腊', '中国台湾', '印度', '阿根廷',
    '韩国', '意大利', '捷克', '法国', '德国', '波兰', '瑞士', '伊朗', '巴西', '黎巴嫩', '西班牙', '泰国', '约旦', '爱尔兰'
</div>
<input type="text" id="genre" placeholder="输入类型">
<div class="hint">可选类型：'战争', '音乐', '传记', '运动', '爱情', '动作', '冒险', '灾难', '犯罪', '武侠', '恐怖', '剧情',
    '古装', '儿童', '科幻', '西部', '歌舞', '动画', '喜剧', '同性', '奇幻', '家庭', '惊悚', '情色', '纪录片', '历史',
    '悬疑'
</div>
<button onclick="getRecommendationsByCountryAndGenre()">推荐</button>
<ul id="recommendations_country_genre"></ul>

<h1>根据喜欢的电影推荐</h1>
<input type="text" id="liked_movie" placeholder="输入喜欢的电影">
<button onclick="getRecommendationsByMovie()">推荐</button>
<ul id="recommendations_movie"></ul>

<script>
    // 根据国家和类型获取电影推荐的函数
    function getRecommendationsByCountryAndGenre() {
        // 获取输入的值
        const data = {
            "country": document.getElementById('country').value,
            "genre": document.getElementById('genre').value
        };
        // 发送POST请求到后端Flask API
        axios.post('http://localhost:5000/recommend_by_country_and_genre', data)
            .then(function (response) {
                // 得到结果后调用函数显示推荐结果
                displayRecommendations(response.data, 'recommendations_country_genre');
            })
            .catch(function (error) {
                // 捕获并打印错误信息
                console.error(error);
            });
    }

    // 根据喜欢的电影获取推荐的函数
    function getRecommendationsByMovie() {
        // 获取输入的喜欢的电影名
        const data = {"liked_movie": document.getElementById('liked_movie').value};
        // 发送POST请求到后端Flask API
        axios.post('http://localhost:5000/recommend_by_movie', data)
            .then(function (response) {
                // 得到结果后调用函数显示推荐结果
                displayRecommendations(response.data, 'recommendations_movie');
            })
            .catch(function (error) {
                // 捕获并打印错误信息
                console.error(error);
            });
    }

    // 显示推荐结果的函数，第1个参数是推荐的结果，第2个参数是显示到哪个元素里
    function displayRecommendations(recommendations, listId) {
        const list = document.getElementById(listId);
        list.innerHTML = '';
        recommendations.forEach(movie => {
            const listItem = document.createElement('li');
            listItem.textContent = movie;
            list.appendChild(listItem);
        });
    }
</script>
</body>
</html>